<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图表容器 -->
        <div ref="Right2" style="height: 150px;"></div>
    </div>
</template>

<script>
import { Bar } from '@antv/g2plot';
// 引入get请求  @表示src别名
import { get } from '@/utils/request';

export default {
    data() {
        return {
            title: '工程使用设备数量',
            tempData:[]
        }
    },
    methods: {
        loadBar() {
            const bar = new Bar(this.$refs.Right2, {
                data:this.tempData,
                xField: 'value',
                yField: 'type',
            })

            bar.render();
        },
        //封装一个请求获取设备数据
        async getEmpData(){
            let res = await get('/dashboard/queryEngineerBindDeviceNumber');
            // console.log(res,'222222');
            this.tempData = res.data;
            
        }
    },
    async mounted(){
        await this.getEmpData();
        this.loadBar();
    }
}
</script>

<style lang="less" scoped></style>